<template>
  <Panel title="账号列表">
    <!-- <span slot="text">账号列表</span> -->

    <div slot="content">
      <!-- 表格 -->
      <div class="list">
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <!-- 账号 -->
          <el-table-column label="账号" width="120" prop="account">
            <!-- <template slot-scope="scope">{{ scope.row.date }}</template> -->
          </el-table-column>
          <!-- 用户组 -->
          <el-table-column prop="userGroup" label="用户组" width="120">
          </el-table-column>
          <!-- 创建时间 -->
          <el-table-column
            prop="address"
            label="创建时间"
            show-overflow-tooltip
          >
            <template slot-scope="scope">{{
              scope.row.ctime | normalData
            }}</template>
          </el-table-column>
          <!-- 操作 -->
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" @click="handleEdit(scope.row)"
                >编辑</el-button
              >
              <!-- <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.row.id)"
                >删除</el-button
              > -->
              <el-popconfirm
                title="你确定删除吗？"
                @confirm="handleDelete(scope.row.id)"
                class="ml20"
              >
                <el-button slot="reference" size="mini" type="danger"
                  >删除</el-button
                >
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 对话框 -->
      <el-dialog title="修改账号内容" :visible.sync="dialogVisible">
        <el-form :model="editForm" size="small">
          <el-form-item label="账号" label-width="100px">
            <el-input v-model="editForm.account" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="用户组" label-width="100px">
            <el-select v-model="editForm.userGroup" placeholder="请选择用户组">
              <el-option label="普通会员" value="普通会员"></el-option>
              <el-option label="高级会员" value="高级会员"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="saveEdit">确 定</el-button>
        </div>
      </el-dialog>

      <!-- 分页 -->
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[3, 5, 8, 10]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400"
        >
        </el-pagination>
      </div>

      <!-- 按钮 -->
      <div class="button">
        <el-button type="danger" @click="batchBtn">批量删除</el-button>
        <el-button type="primary" @click="batchCancel">取消选择</el-button>
      </div>
    </div>
  </Panel>
</template>

<script>
import Panel from "@/components/Panel.vue";
import { reqAccList, accountDel, accounBatchAdd, getAddEdit } from "@/api/user";
// import func from 'vue-editor-bridge';
export default {
  components: {
    Panel,
  },

  // 表格
  data() {
    return {
      tableData: [],

      currentPage: 1,
      pageSize: 10,
      total: 0,

      // 批量删除id
      ids: [],
      // 对话框
      dialogVisible: false,

      // 编辑的数据
      editForm: {
        account: "",
        userGroup: "",
      },

      form: {},
    };
  },
  created() {
    this.getData();
  },

  methods: {
    // 删除
    //  async handleDelete(id){
    //   let res=await accountDel(id);
    //   console.log(res.data);
    //   if(res.data.code==0){
    //     this.$message.success(res.data.msg)
    //   }
    //  },

    // 把选中的需要删除的id放入ids中
    handleSelectionChange(val) {
      // console.log('====>val',val);
      this.ids = val.map((v) => v.id);
      // console.log(this.ids);
    },

    handleSelectionChange() {},
    handleSizeChange() {},
    formInline() {},

    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.getData();
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.getData();
    },

    // toggleSelection(rows) {
    //     if (rows) {
    //       rows.forEach(row => {
    //         this.$refs.multipleTable.toggleRowSelection(row);
    //       });
    //     } else {
    //       this.$refs.multipleTable.clearSelection();
    //     }
    //   },

    // handleSelectionChange(val) {
    //   console.log(val);
    //   this.multipleSelection = val;
    // },

    // 取消全选
    batchCancel() {
      this.$refs.multipleTable.clearSelection();
    },

    // 列表数据
    async getData() {
      let res = await reqAccList({
        currentPage: this.currentPage,
        pageSize: this.pageSize,
      });
      // console.log(res);
      let { data, total } = res.data;

      if (!data.length && this.currentPage != 1) {
        this.currentPage -= 1;
        this.getData();
      }

      this.tableData = data;
      this.total = total;
    },

    async handleDelete(id) {
      let res = await accountDel({ id });

      if (res.data.code == 0) {
        this.$message.success(res.data.msg);
        this.getData();
      }
    },

    // 批量删除
    batchBtn() {
      // console.log(666);
      if (this.ids.length) {
        this.$confirm("此操作将永久删除该选项,是否继续?", "提示", {
          confirmButtonClass: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(async () => {
            let res = await accounBatchAdd({ ids: this.ids });
            // console.log(res);
            if (res.data.code == 0) {
              //     this.$message({
              //     type:'success',
              //     message:res.data.msg
              // });
              this.getData();
            }
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      } else {
        this.$message({
          type: "error",
          message: "请选择需要删除的选项!",
        });
      }
    },

    // 对话框功能
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },

    // 编辑功能
    handleEdit(row) {
      console.log(row);
      this.editForm = { ...row };
      this.dialogVisible = true;
    },

    // 保存修改
    async saveEdit() {
      let res=await getAddEdit(this.editForm);

      if(res.data.code==0){
        this.dialogVisible=false
        this.getData()
      }
    },
    


  },
};
</script>

<style lang="less" scoped>
.block {
  margin-top: 20px;
}
.button {
  margin-top: 20px;
}
.el-input {
  width: 194px;
}
/deep/.el-dialog {
  width: 400px;
}

.ml20 {
  margin-left: 20px;
}
</style>